<ng-include src="ctrl.templateUrl"></ng-include>

<div id="admin">

    <div class="col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li role="presentation" ng-class="{active:tab === 'dashboards'}"><a href ng-click="navigateToTab('dashboards')">Edit Dashboards</a></li>
        <li role="presentation" ng-class="{active:tab === 'users'}"><a href ng-click="navigateToTab('users')">Manage Admins</a></li>
        <li role="presentation" ng-class="{active:tab === 'apitokens'}"><a href ng-click="navigateToTab('apitokens')">Generate ApiTokens</a></li>
        <li role="presentation"  ng-class="{active:tab === 'templates'}"><a href ng-click="navigateToTab('templates')">Manage Templates</a></li>
        <li role="presentation" ng-class="{active:tab === 'configurations'}"><a href ng-click="navigateToTab('configurations')">General Configurations</a></li>
        <li role="presentation" ng-class="{active:tab === 'auditconfig'}"><a href ng-click="navigateToTab('auditconfig')">Audit Configurations</a></li>
          <li role="presentation" ng-class="{active:tab === 'featureflags'}"><a href ng-click="navigateToTab('featureflags')">Feature Flags</a></li>
      </ul>
    </div>

    <div class="container-fluid">
        <div class="col-md-8">
          <div ng-show="tab === 'dashboards'">
              <div class="widget-modal">
                  <div class="widget-modal-heading">
                      Rename/Delete Dashboard
                  </div>
                  <div class="widget-modal-body">
                      <div class="row">
                          <div class="gap">
                              <input type="search" name="collectorItemId" class="form-control" placeholder="Type to find dashboard"
                                     ng-model="ctrl.search"
                                     uib-typeahead="item.description for item in ctrl.filterByTitle($viewValue)" typeahead-focus
                                     typeahead-template-url="jobUrlTemplate.html"
                                     typeahead-min-length="0"
                                     typeahead-wait-ms="250"
                                     autocomplete="off"
                                     typeahead-no-results="noResults"
                                     required>
                          </div>

                          <div class="col-xs-push-2 col-xs-8">
                              <div class="text-center" ng-hide="ctrl.dashboards">Loading Dashboards...</div>

                              <div class="list-animate">
                                  <div class="dash-modal-row delete-dashboard-row clearfix"
                                       dir-paginate="item in filteredDashboards = (ctrl.dashboards | filter:q | itemsPerPage: ctrl.getPageSize() | orderBy: 'name')"
                                       current-page="currentPage"
                                       total-items= ctrl.getTotalItems()
                                       pagination-id="adminDashboard">
                                      <div title="{{item.name}}" class="btn-block">{{item.name |  trunText:30}}
                                          <a href delete-confirm title="Are you sure you want to delete?" confirm-action="ctrl.deleteDashboard(item.id)">
                                              <dash-trash class="clickable pull-right"></dash-trash>
                                          </a>
                                          <dash-edit class="clickable pull-right" ng-click="ctrl.editDashboard(item)"></dash-edit>
                                      </div>
                                  </div>
                              </div>
                              <dir-pagination-controls
                                      max-size="8"
                                      boundary-links="true"
                                      direction-links="true"
                                      on-page-change="ctrl.pageChangeHandler(newPageNumber)"
                                      pagination-id="adminDashboard">
                              </dir-pagination-controls >

                              <br/><div class="text-center" ng-show="ctrl.dashboards && !ctrl.dashboards.length">
                                  No results
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
            </div>

            <div ng-show="tab === 'templates'">
                <div class="widget-modal">
                    <div class="widget-modal-heading">
                        Manage Templates
                    </div>
                    <div class="widget-modal-body">

                        <div class="row gap">
                            <div class="col-sm-4 col-sm-push-8 text-center">
                                <div>
                                    <div class="create-dashboard-button btn btn-default btn-wide-2x" ng-click="ctrl.goToManager()">
                                        <span class="fa fa-stack fa-lg">
                                            <span class="fa-circle-thin fa-stack-2x"></span>
                                            <span class="fa-plus fa-stack-1x"></span>
                                        </span>
                                        <br/>
                                        Create a new<br/>template
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-8 col-sm-pull-4">
                                <div>
                                    <ul class="list-animate list-group text-left">
                                      <li class="list-group-item" ng-repeat="template in ctrl.templates" >
                                        <span class="pull-right">
                                        <a href ng-click="ctrl.editTemplate(template)"><span class="fa fa-lg fa-edit"></span></a>
                                        <a href delete-confirm title="Are you sure you want to delete?" confirm-action="ctrl.deleteTemplate(template)">
                                          <span class="fa fa-lg fa-trash text-danger"></span>
                                        </a>
                                        </span>
                                        <a class="btn-block clickable" ng-click="ctrl.viewTemplateDetails(template)">
                                          <span class="fa fa-lg left-icon" ></span>
                                          {{ template.template }}
                                        </a>
                                      </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div ng-show="tab === 'users'">
                <div class="widget-modal">
                    <div class="widget-modal-heading">
                        Manage Admins
                    </div>
                    <div class="widget-modal-body">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="text-center" ng-hide="users">Loading Users...</div>
                                <div ng-show="error">
                                  {{error.data}}
                                </div>

                                <div class="row">
                                  <div class="col-xs-5">
                                    <h3>Users</h3>
                                    <input type="text" class="form-control" id="userSearch" placeholder="Filter Users" ng-model="userSearch">

                                    <div class="dash-modal-row delete-dashboard-row clearfix"
                                        ng-repeat="user in users | filter:{username:userSearch, authorities:'!ROLE_ADMIN'} | orderBy:'username'">
                                        <div class="btn-block">
                                          <span class="label label-primary" ng-show="isActiveUser(user)">You</span>
                                          {{user.username}}
                                          <span class="badge">{{user.authType}}</span>
                                          <div title="Promote User" class="clickable pull-right" ng-click="promoteUserToAdmin(user)">
                                            <span class="clickable fa fa-stack">
                                                <span class="fa-circle-thin fa-stack-2x text-success"></span>
                                                <span class="fa-angle-right fa-stack-1x text-success"></span>
                                            </span>
                                          </div>
                                        </div>
                                    </div>
                                  </div>
                                  <div class="col-xs-push-2 col-xs-5">
                                    <h3>Admins</h3>
                                    <div class="dash-modal-row delete-dashboard-row clearfix"
                                        ng-repeat="user in users | orderBy:'username' | filter:{authorities:'ROLE_ADMIN'} as filteredAdmins">
                                        <div class="btn-block">
                                          <span class="label label-primary" ng-show="isActiveUser(user)">You</span>
                                          {{user.username}}
                                          <span class="badge">{{user.authType}}</span>
                                          <div title="Demote User" ng-show="filteredAdmins.length > 1" class="clickable pull-right" ng-click="demoteUserFromAdmin(user)">
                                            <span class="clickable fa fa-stack">
                                                <span class="fa-circle-thin fa-stack-2x text-danger"></span>
                                                <span class="fa-angle-left fa-stack-1x text-danger"></span>
                                            </span>
                                          </div>
                                        </div>
                                    </div>
                                  </div>
                                </div>

                                <div class="text-center" ng-show="users && !users.length">
                                    No results
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
            <div ng-show="tab === 'apitokens'">
                <div class="widget-modal">
                    <div class="widget-modal-heading">
                        Generate Api Tokens
                    </div>
                    <div class="widget-modal-body">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="text-center" ng-hide="apitokens">Loading Api Tokens...</div>
                                <div ng-show="error">
                                    {{error.data}}
                                </div>

                                <div class="row">
                                    <div class="col-xs-15">
                                        <div class="btn-block col-xs-15">
                                            <span class="col-xs-3"><h3>Api User</h3></span>
                                            <span class="col-xs-3"><h3>Expiration Date</h3></span>
                                            <span class="col-xs-6"><button type="button" class="btn btn-primary btn-wide pull-right" ng-click="ctrl.generateToken()">New</button>
                                            </span>
                                        </div>

                                        <input type="text" class="form-control" id="tokenSearch" placeholder="Filter Api Users" ng-model="tokenSearch">

                                        <div class="dash-modal-row delete-dashboard-row clearfix"
                                            ng-repeat="apitoken in apitokens | filter:{apiUser:tokenSearch} | orderBy:'apiUser'">
                                            <div class="btn-block col-xs-15">
                                                <span class="col-xs-3">{{apitoken.apiUser}}</span>
                                                <span>{{::apitoken.expirationDt | date:'MM/dd/yyyy HH:mm:ss'}}</span>
                                                <a href delete-confirm title="Are you sure you want to delete?" confirm-action="ctrl.deleteToken(apitoken.id)">
                                                  <dash-trash class="clickable pull-right"></dash-trash>
                                                </a>
                                                <dash-edit class="clickable pull-right" ng-click="ctrl.editToken(apitoken)"></dash-edit>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="text-center" ng-show="apitokens && !apitokens.length">
                                    No results
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div ng-show="tab === 'configurations'">
   <div class="widget-modal">
      <div class="widget-modal-heading">
         General Configurations
      </div>
      <div class="widget-modal-body">
         <form class="generalConfigForm" name="generalConfigForm" ng-submit="generalConfigFormSave(generalConfigForm, choices)"
            novalidate="novalidate">
            <uib-accordion close-others="oneAtATime">
               <div uib-accordion-group class="panel-default" is-open="status.open" ng-repeat="(key,group) in choices">
                  <uib-accordion-heading>
                     {{group.collectorName}} <span class="confHeaderIcon" uib-tooltip-html="configTooltip"><i class="fa fa-info-circle" aria-hidden="true"></i></span>
<i class="fa fa-trash-o" ng-click="removeConfigHead($event,key)"></i>
                     <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
                  </uib-accordion-heading>
                  <div class="row configApplyPadd" ng-class-odd="'cssConfigOdd'"  ng-class-even="'cssConfigEven'"  ng-repeat="choice in group.info" style="margin-bottom:5px;">
                     <div class="col-xs-12">
                        <div class="col-xs-10">
                           <div class="row">
                              <span class="col-xs-1">
                              Url: 
                              </span>
                              <span class="col-xs-11">
                                 <form-group input="input{{group.collectorName}}Url_{{$index + 1}}" >
                                    <input type="url" 
                                       class="form-control"
                                       ng-model="choice.url" 
                                       name="input{{group.collectorName}}Url_{{$index + 1}}" 
                                       placeholder="Enter the server url"
                                       required>
                                 </form-group>
                              </span>
                           </div>
                           <div class="row">
                              <span class="col-xs-2">
                              Username: 
                              </span>
                              <span class="col-xs-4">
                                 <form-group input="input{{group.collectorName}}Username_{{$index + 1}}" >
                                    <input type="text" 
                                       class="form-control"
                                       ng-model="choice.userName" 
                                       name="input{{group.collectorName}}Username_{{$index + 1}}" 
                                       placeholder="Enter the username"
                                       required>
                                 </form-group>
                              </span>
                              <span class="col-xs-2">
                              Password: 
                              </span>
                              <span class="col-xs-4">
                                 <form-group input="input{{group.collectorName}}Pass_{{$index + 1}}" >
                                    <div class="input-group">
                                       <input type="password" 
                                          class="form-control"
                                          ng-model="choice.password" 
                                          name="input{{group.collectorName}}Pass_{{$index + 1}}" 
                                          id="input{{group.collectorName}}Pass_{{$index + 1}}"
                                          placeholder="Enter the Password"
                                          required>
                                       <span class="input-group-addon inputBoxStyle" ng-click="togglePasswordType('input'+group.collectorName+'Pass_'+($index + 1),'input'+group.collectorName+'PassClass_'+($index + 1))">
                                       <i id="input{{group.collectorName}}PassClass_{{$index + 1}}" class="fa fa-eye" aria-hidden="true"></i>
                                       </span>
                                    </div>
                                 </form-group>
                              </span>
                           </div>
                        </div>
                        <div class="col-xs-2">
                           <dash-trash class="clickable" ng-show="$index!=0" ng-click="removeNewConfig($index,key)"></dash-trash>
                           <dash-add class="clickable" ng-show="$last" ng-click="addNewConfig(key)"></dash-add>
                        </div>
                     </div>
                  </div>
               </div>
            </uib-accordion>
            <div class="row">
               <div class="col-xs-12">
                  <button class="btn btn-primary pull-right"  >Save</button>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>


            <div ng-show="tab === 'auditconfig'">
                <div class="widget-modal">
                    <div class="widget-modal-heading">
                        Audit Configurations
                    </div>
                    <div class="widget-modal-body">
                        <form class="auditConfigForm" name="auditConfigForm"
                              novalidate="novalidate">


                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="text-center" ng-hide="ctrl.serviceAccounts">Loading Service Accounts...</div>
                                    <div ng-show="error">
                                        {{error.data}}
                                    </div>

                                    <div class="row">
                                        <div class="col-xs-15">
                                            <div class="btn-block col-xs-15">
                                                <span class="col-xs-3"><h3>Service Account</h3></span>
                                                <span class="col-xs-3"><h3>File Types</h3></span>
                                                <span class="col-xs-6"><button type="button" class="btn btn-primary btn-wide pull-right" ng-click="ctrl.addServiceAccount()">New</button>
                                            </span>
                                            </div>

                                            <input type="text" class="form-control" id="accountSearch" placeholder="Filter service accounts" ng-model="accountSearch">


                                            <div class="dash-modal-row delete-dashboard-row clearfix"
                                                 ng-repeat="account in ctrl.serviceAccounts | filter:{serviceAccountName:accountSearch}">
                                                <div class="btn-block col-xs-15">
                                                    <span class="col-xs-3">{{account.serviceAccountName}}</span>
                                                    <span class="col-xs-3">{{account.fileNames}}</span>
                                                    <a href delete-confirm title="Are you sure you want to delete?" confirm-action="ctrl.deleteAccount(account.id)">
                                                        <dash-trash class="clickable pull-right"></dash-trash>
                                                    </a>
                                                    <dash-edit class="clickable pull-right" ng-click="ctrl.editAccount(account)"></dash-edit>
                                                </div>
                                            </div>


                                        </div>
                                    </div>

                                    <div class="text-center" ng-show="ctrl.serviceAccounts && !ctrl.serviceAccounts.length">
                                        No results
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>


            <div ng-show="tab === 'featureflags'">
                <div class="widget-modal">
                    <div class="widget-modal-heading">
                        Feature Flags
                    </div>
                    <span class="col-xs-12"><button type="button" class="btn btn-primary btn-wide pull-right" ng-click="ctrl.addFeatureFlag()">New</button></span><br/>
                    <div class="widget-modal-body">
                        <form class="featureFlagForm" name="featureFlagForm"
                              novalidate="novalidate">
                            <div class="row">
                                <div class="col-xs-12">

                                    <uib-accordion close-others="oneAtATime">
                                        <div uib-accordion-group class="panel-default" is-open="status.open" ng-repeat="featureFlag in ctrl.featureFlags">
                                            <uib-accordion-heading>
                                               {{featureFlag.name}} : {{featureFlag.description}}
                                                <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
                                            </uib-accordion-heading>
                                            <div>
                                                <ul class="list-animate list-group text-left">
                                                    <li class="list-group-item" >

                                                        <ul class="list-animate list-group text-left" ng-repeat="(key,value) in featureFlag">
                                                            <span class="btn-block" ng-if="key =='flags'">
                                                            <li class="list-group-item" ng-repeat="(key,value) in featureFlag.flags">
                                                                <span class="btn-block">{{key | uppercase}} : {{value}}</span>
                                                            </li>
                                                                </span>
                                                        </ul>

                                                    </li>
                                                    <div ng-if="featureFlag">
                                                        <li class="list-group-item" style="word-wrap: break-word" >
                                                            Raw data :  {{featureFlag}}
                                                        </li>
                                                    </div>

                                                </ul>



                                                <div ng-hide="!ctrl.featureFlags">
                                                    <a href delete-confirm title="Are you sure you want to delete?" confirm-action="ctrl.deleteFlags(featureFlag.id)">
                                                        <dash-trash class="clickable pull-right"></dash-trash>
                                                    </a>
                                                    <dash-edit class="clickable pull-right" ng-click="ctrl.addFeatureFlag()"></dash-edit>
                                                </div>

                                            </div>
                                        </div>

                                    </uib-accordion>

                                </div>


                            </div>

                        </form>
                    </div>
                </div>
            </div>



        </div>
    </div>

    <div class="themes" ng-show="::ctrl.storageAvailable">
        <div class="btn-group" uib-dropdown is-open="status.isopen">
            <button type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle>
                Themes <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li
                    ng-class="{'active': ctrl.theme == theme.filename}"
                    ng-repeat="theme in ctrl.themes">

                    <a class="clickable btn-block" ng-click="ctrl.applyTheme(theme.filename)">
                        {{theme.name}}
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script type="text/ng-template" id="jobUrlTemplate.html">
    <a title={{match.model.options.instanceUrl}}>
        <span ng-bind-html="match.label | uibTypeaheadHighlight:query"/>
    </a>
</script>